<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!--1. 导入模版引擎js文件 此时全局会挂载template('模版id',需要渲染的数据对象)函数 -->
    <script src="js/template-web.js"></script>
</head>

<body>
    <div id="div"></div>

    <!-- 3.定义模版 -->
    <!-- 3.1模版的html结构必须 定义 在script标签里 因script默认解析js语言 所以需要手动改变为解析html语言 type="text/html" -->
    <script type="text/html" id="tpl-user">
    <!-- 3.2{{待填充的数据}} 占位符(template语法) -->
    <h1>{{name}}{{age}}{{sex}}</h1>
    </script>


    <script>
        // 2.定义数据
        var data = {
            name: 'andy',
            age: '男',
            sex: '女',
          
        }

        // 4.调用函数
        var htmlstr = template('tpl-user', data)

        // 5.渲染HTML结构
        var div = document.querySelector('#div')
        div.innerHTML = htmlstr
    </script>
    <!-- 注意： 模版引擎按照这五步操作 -->
</body>

</html>